<!DOCTYPE html>
<html lang="en">
<head>
<title>How can I structure my document to make it more accessible?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How can I structure my document to make it more accessible?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_D72A48C6-2334-4200-98C2-365365515CD6" class="text-block-content">
    <p><span style="color:rgb(33,34,36);">Organizing your page with helpful titles and headings creates an outline that helps your audience access the most important information more quickly and easily.</span></p>
<p>Assistive technology users rely heavily on page titles and headings to navigate complex content. Structuring complex content will help all users parse it as well. Headings allow users to jump from one part of a document to another without using a mouse. Screen readers will interpret headings for those who use them.</p>
<p>Note that for this reason, you should not use headings for typographical effects. If you need to increase or decrease the font size of large blocks of text, please use the <strong>Normal</strong> Paragraph Format and select a new <strong>Font size</strong> from the <strong>Size</strong> menu, or use <strong>Styles</strong>.</p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="use-unique-and-descriptive-page-titles">
    <h2 class="step-title screensteps-heading">Use unique and descriptive page titles.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_E56EAF92-BE76-4AF6-9792-A2DD990F2DF4" class="text-block-content">
    <p>Assistive technology users rely on page titles. You will run across the need to specify this when you are creating a page in the <em>Lessons</em> tool or an HTML page in the <em>Resources</em> tool. The title of the new document will be the same as the name of the item as it appears on the left-hand tool menu or the list in <em>Resources</em>.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="do-not-use-color-or-spatial-position-to-convey-information">
    <h2 class="step-title screensteps-heading">Do not use color or spatial position to convey information.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_E5565E8B-547B-4E4E-B1F1-307F7928BBF3" class="text-block-content">
    <p>Using color or spatial position to convey important information can be problematic. For example, if you were to say, "click the green button on the left," color blind users may not be able to distinguish the button. Screen reader users may have difficulty interpreting "left" because a screen reader reads from the top of the page to the bottom, as well as left to right. Therefore, the best solution is to quote the target label: for example, <em>"Click on <strong>Start Assignment</strong>," or "Click the <strong>Save</strong> button."</em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="Add-Structure-with-Headings.">
    <h2 class="step-title screensteps-heading">Add structure with headings.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_231238BA-1495-471C-810F-8876452E1B3E" class="text-block-content">
    <p>If a document can be outlined or you have an outline in mind when writing it, then adding headings will convey its structure. Use short title-like headings that describe the content that follows.</p>
<p>Nest headings appropriately:</p>
<ul>
<li>
<strong>Heading 1</strong> &gt; <strong>Heading 2</strong>
</li>
<li>If you have a section containing three sub-sections, it might look like this: <strong>Heading 2</strong> &gt; <strong>Heading 3</strong>, <strong>Heading 3</strong>, <strong>Heading 3</strong>
</li>
<li>In most cases, you should start with a Heading 1.</li>
</ul>
  </div>
</div>
 
        <div class="step screensteps-section screensteps-depth-2" id="steps-to-add-headings">
    <h3 class="step-title screensteps-heading">Steps to Add Headings</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/030/095/original/e5885645-a73e-4c45-a486-8b15596e2b81.png" alt="" height="592" width="834">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_35095B9F-AC4D-4205-A0E9-16F24DC4AAA8" class="text-block-content">
    <ol>
<li>Headings are available from the <strong>Paragraph Format</strong> menu. By default, this menu will say <strong>Normal</strong>.</li>
<li>When you position your cursor in the text box, the name of this menu will change to match the <em>Paragraph Format</em> of your text. In a blank document, it will say <strong>Normal</strong>.</li>
<li>Click on the <strong>Paragraph Format</strong> menu (<strong>Normal</strong>, in a blank document) to select a <strong>Heading</strong>.</li>
</ol>
<p><em>Notes:</em></p>
<ul>
<li><em>The default size of the Headings can always be adjusted with the <strong>Size</strong> menu. The default size of some of the higher-level headings (the ones with small font sizes, e.g., <strong>Heading 5 </strong>and<strong> Heading 6</strong>) may need adjustment.</em></li>
<li><em>Conversely, do not use headings for typographical effects. Users of assistive technologies can navigate through a document by jumping from heading to heading. If you need to increase or decrease the font size of large blocks of text, please use the <strong>Normal</strong> Paragraph Format and select a new font size from the <strong>Size</strong> menu.</em></li>
</ul>
  </div>
</div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="use-inline-styles">
    <h2 class="step-title screensteps-heading">Use inline styles.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/030/099/original/19453e85-694e-4483-92ad-1cec956ed276.png" alt="" height="340" width="824">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_1FD5E630-CC29-48C7-A16C-2F6015CFD292" class="text-block-content">
    <p>Using the right style to format a bit of text is very helpful as it "codes" it appropriately. The following types of formatting are all available in the <strong>Styles</strong> menu:</p>
<ul>
<li>
<strong>Italic Title</strong> - Makes selected text an <em>italicized</em> <strong>Heading 2</strong>.</li>
<li>
<strong>Subtitle</strong> - Makes selected text an <em>italicized</em> <strong>Heading 3</strong>, colored <span style="color:rgb(192,192,192);"><strong>pale gray</strong></span>.</li>
<li>
<strong>Special Container</strong> - Inserts a block of text (a &lt;div&gt; HTML element) that can be used to group together several items in a document and/or format them with background colors or borders. As with <em>paragraph breaks</em>, using &lt;div&gt; <em>containers</em> to group items in meaningful ways can assist with navigation because keyboard users can skip from one group of elements to another.</li>
<li>
<strong>Marker</strong> - This highlights text in bright yellow. </li>
<li>
<strong>Big - </strong>Without setting a specific font size, this style makes selected text slightly larger than the text that surrounds it.</li>
<li>
<strong>Small</strong> - Without setting a specific font size, this style makes selected text slightly smaller than the text that surrounds it.</li>
<li>
<strong>Typewriter - </strong>This style makes the text appear in a monospaced slab serif format, similar to a typewriter font such as Courier.</li>
<li>
<strong>Computer Code</strong> - This indicates a block of text that has been identified as computer code (for example, a list of HTML tags to indicate how to code in HTML).</li>
<li>
<strong>Keyboard Phrase</strong> - This style defines keyboard input.</li>
<li>
<strong>Sample Text - </strong>This style makes the text appear in a sans serif format, similar to Arial font.</li>
<li>
<strong>Variable </strong>- This indicates specific variables used in a mathematical expression. </li>
<li>
<strong>Deleted Text</strong> - This puts a strike through selected text (a line through the middle of the text to cross it out).</li>
<li>
<strong>Inserted Text</strong> - This <span style="text-decoration:underline;">underlines</span> text.</li>
<li>
<strong>Cited Work </strong>- Visually, text is <em>italicized</em>.</li>
<li>
<strong>"Inline Quotation" </strong>- This signifies inline quoted text.<strong> </strong>
</li>
<li>
<strong>Language: RTL</strong> - This indicates that the language reads from right to left. Some examples of RTL languages include Hebrew and Arabic.</li>
<li>
<strong>Language: LTR</strong> - This indicates that the language reads from left to right. English is an example of an LTR language.</li>
</ul>
<p>If you are curious to see what these do, add one and switch to <strong>Source </strong>view. The <strong>Inline Quotation</strong> style will use &lt;q&gt;, which will signify the opening of an inline quotation. <strong>Cited Work</strong> will create an element that presents itself as such. Conversely, avoid using these special formats to achieve a typographical effect. For example, <strong>Cited Work</strong> produces italic text, but it would be confusing to a screen reader if you used it just to italicize text for emphasis.</p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
